/*
 * @Descripttion   :
 * @version        :
 * @Author         :
 * @Date           : 2025-08-08 09:06
 * @LastEditTime   : 2025-09-24 09:35
 */
import Overlay from './Overlay'
export default class Css3DLable extends Overlay {
  constructor ({
    sandbox,
    position = { x: 0, y: 0, z: 0 },
    rotation = { x: 0, y: 0, z: 0 },
    fountOffect = { x: 0, y: 0, z: 0 },
    scale = 1,
    text = '',
    id = '',
    fontSize = '20px',
    imageWidth = '250px',
    imageHigh = '71px',
    image = '',
    className = 'element',
    ClickcallBack = null,
    EnableLookAtCamera = false,
    target = null
  }) {
    super()
    this.sandbox = sandbox
    this.scene = sandbox.scene
    this._position = position
    this._rotation = rotation
    this._scale = scale
    this._text = text
    this._id = id
    this._image = image
    this._imageWidth = imageWidth
    this._imageHigh = imageHigh
    this._className = className
    this._ClickcallBack = ClickcallBack
    this._EnableLookAtCamera = EnableLookAtCamera
    this._target = target
    this._fontSize = fontSize
    this._fountOffect = fountOffect
    return this.initOverlay()
  }

  async initOverlay () {
    this.overlay = this.Element(this._text, this._className)
    const { x, y, z } = this._position
    this.overlay.position.set(x, y, z)
    this.overlay.rotation.set(
      GC.MathUtils.degToRad(this._rotation.x), // 将度转换为弧度
      GC.MathUtils.degToRad(this._rotation.y),
      GC.MathUtils.degToRad(this._rotation.z)
    )
    const scaleArr = Array.isArray(this._scale) ? this._scale : [this._scale, this._scale, this._scale]
    this._scale = { x: scaleArr[0], y: scaleArr[1], z: scaleArr[2] }
    this.overlay.scale.set(...scaleArr)
    this.scene.add(this.overlay)
    if (this._EnableLookAtCamera) {
      const cameraDirection = new GC.Vector3()
      this.animateCSS3DObject = () => {
        if (this.overlay) {
          this.sandbox.camera.getWorldDirection(cameraDirection)
          // this.overlay.lookAt(window.sandbox.camera.position);
          this.overlay.lookAt(this.overlay.position.clone().sub(cameraDirection))
          this.animationId = requestAnimationFrame(this.animateCSS3DObject)
        }
      }
      this.animateCSS3DObject()
    }
    return this
  }

  Element (id, className) {
    const div = document.createElement('div')
    div.id = id + '_' + this._id // 设置唯一 ID
    div.className = className
    div.style.width = this._imageWidth
    div.style.height = this._imageHigh
    // div.style.backgroundColor = "#000";

    div.style.backgroundImage = `url(${this._image})`
    // div.style.backgroundImage = 'url("./textures/testimg/btn-1.png")'; // 相对路径
    div.style.backgroundSize = '100% 100%'
    div.style.backgroundRepeat = 'no-repeat'

    // 创建标题元素
    const title = document.createElement('h1')
    title.style.position = 'absolute'
    // title.style.display='none'
    title.textContent = id
    title.style.width = '500px'
    title.style.left = '50%'
    title.style.top = '50%'
    title.style.color = 'white' // 设置文字颜色
    title.style.textAlign = 'center' // 水平居中
    title.style.margin = '0' // 移除默认 margin
    title.style.lineHeight = this._imageHigh // 垂直居中（手动调整）
    title.style.fontSize = this._fontSize // 设置字体大小
    title.style.transform = `translate3d(calc(-50% + ${this._fountOffect.x}px), calc(-50% + ${this._fountOffect.y}px), 0)`
    // 添加点击事件
    div.addEventListener('click', () => {
      // console.log("元素被点击了！", id);
      // alert(`点击了元素 ${id}`);
      if (this._ClickcallBack) {
        this._ClickcallBack(this._target, id, this)
      }
    })
    // 把标题添加到 div 内部
    div.appendChild(title)
    const object = new GC.CSS3DObject(div)
    this._divElement = div
    this._titleElement = title
    return object
  }

  updateText (newText) {
    if (this._titleElement) this._titleElement.textContent = newText
  }

  updateImage (newImage) {
    if (this._divElement) {
      this._divElement.style.backgroundImage = `url(${newImage})`
      this._image = newImage
    }
  }

  stopAnimation () {
    if (this.animationId) {
      cancelAnimationFrame(this.animationId)
      this.animationId = null
    }
  }
}
